<script setup lang="ts">
import Tools from './Tools.vue'
import Left from './Left.vue'
import Right from './Right.vue'
import Stage from './Stage.vue'
import Bottom from './Bottom.vue'
import MessageBox from './MessageBox.vue'
import { SvgObject } from '@/objects/StageObject'
import { useStage } from '@/store/stage'
import { ref } from 'vue'
import { useSystem } from '@/store/sys'

const stage = useStage()
const isDraging = ref(false)
const { showMessage } = useSystem()
const onDrop = (e: DragEvent) => {
    e.preventDefault()
    isDraging.value = false
    const file = e.dataTransfer?.files[0]
    if (!file) {
        return
    }
    const reader = new FileReader();
    reader.readAsText(file)
    reader.onload = (e) => {
        try {
            const code = e.target?.result as string
            const svg = SvgObject.fromCode(code)
            stage.setSvg(svg)
        } catch (error) {
            showMessage('文件解析失败')
        }
    }

}

const dragover = (e: DragEvent) => {
    e.preventDefault()
    isDraging.value = true
}

const dragleave = (e: DragEvent) => {
    e.preventDefault()
    isDraging.value = false
}

</script>
<template>
    <div class="editor" @drop="onDrop" @dragover="dragover" @dragend="dragleave" @dragleave="dragleave"
        @dragexit="dragleave">
        <Tools class="tools" />
        <Left class="left" />
        <Stage class="stage" :class="{ 'editor-drop': isDraging }" />
        <Right class="right" />
        <Bottom class="bottom" />
        <MessageBox />
    </div>
</template>
<style scoped>
.editor {
    display: grid;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.editor-drop {
    outline: 2px solid #03A9F4;
}

.tools {
    grid-column: 1/8;
    grid-row: 1/1;
}

.left {
    grid-column: 1/1;
    width: 10vw;
}

.right {
    grid-column: 6/8;
    width: 20vw;
}

.left,
.stage,
.right {
    grid-row: 2/16;
    height: calc(100vh - 10rem);
}

.stage {
    grid-column: 2/6;
    width: 70vw;
}

.bottom {
    grid-column: 1/8;
    grid-row: 16/18;
    height: 8rem;
}
</style>